<template>
  <div class="left-container">
    <div style="margin-bottom: 10px" v-px-to-vw>入住人数</div>
    <div class="flex">
      <div class="person" style="color: #00ffb2">
        <div style="margin-bottom: 4px" v-px-to-vw>总床位</div>
        <div>
          <!-- <span style="border-color: #00ffb2">1</span><span style="border-color: #00ffb2">0</span><span style="border-color: #00ffb2">0</span>人 -->
          <span v-for="(digit, idx) in splitNumber(ref_bedsInfo?.zongchw)" :key="idx" style="border-color: #00ffb2">
            {{ digit }}
          </span>床
        </div>
      </div>
      <div class="person" style="color: #fff509">
        <div style="margin-bottom: 4px" v-px-to-vw>当前入住学生</div>
        <div>
          <!-- <span style="border-color: #fff509">1</span><span style="border-color: #fff509">0</span><span style="border-color: #fff509">0</span>人 -->
          <span v-for="(digit, idx) in splitNumber(ref_bedsInfo?.ruzhrsh)" :key="idx" style="border-color: #fff509">
            {{ digit }}
          </span>床
        </div>
      </div>
    </div>
    <div ref="pieChartRef" class="chart-container" style="height: 30%; flex-grow: 1;"></div>
    <div ref="barChartRefA" class="chart-container" style="height: 20%; flex-grow: 1;"></div>
    <div style="margin: 10px 0" v-px-to-vw>归寝情况</div>
    <div style="position: relative; height: 30%; flex-grow: 1;">
      <div ref="barChartRef" class="chart-container"></div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref,onUnmounted } from "vue";
import * as echarts from "echarts";

import * as leaderApi from '@/api/leaders'

// 公寓入住统计
const check_in_statistics = async () => {
    leaderApi.check_in_statistics().then(res => {
        console.log("check_in_statistics",res);
        initChartBar(res.data);
    });
}

const ref_bedsInfo = ref({});
// 公寓床位统计
const apartment_beds_statistics = async () => {
  leaderApi.apartment_beds_statistics().then(res => {
    console.log("apartment_beds_statistics", res);
    ref_bedsInfo.value = res.data[0];
    pieData.value = [
      {  name: "女生入住", value:  ref_bedsInfo.value.nanshrzhrsh   },
      {  name: "男生入住", value: ref_bedsInfo.value.nvshrzhrsh },
      {  name: "空床", value: ref_bedsInfo.value.kongchsh}
    ]
    initChartB();
  });
}

const splitNumber = (num) => {
  if(num)
  {
    return num.toString().split('');
  }
  return [];
};

onMounted(() => {
  check_in_statistics();
  apartment_beds_statistics();
  // initChartBar();
  // initChartB();
  initChartE();
  refreshDataInterval();
});
let barChartRefA = ref(null);
let barChartA = ref(null);
const initChartBar = (resData) => {
  if (barChartRefA.value) {
    const existingChart = echarts.getInstanceByDom(barChartRefA.value);
    if (existingChart) existingChart.dispose();
  }
  const colorList = ["#00FFF0", "#00FFB2"];
  var yData = resData.map(item => item.grade_name);
  var seriesData = resData.map(item => item.count);
  const option = {
    color: colorList,
    grid: {
      right: 40,
      bottom: 10,
      top: 20,
      left: 10,
      containLabel: true,
    },
    tooltip: {},
    xAxis: {
      type: "value",
      axisLine: {
        show: true,
        lineStyle: {
          color: "#0094ff", // ✅ X轴线颜色
        },
      },
      splitLine: {
        lineStyle: {
          color: "#0094ff",
        },
      },
      axisTick: {
        lineStyle: {
          color: "#0094ff", // ✅ X轴刻度线颜色
        },
      },
      axisLabel: {
        color: "#fff",
      },
    },
    yAxis: {
      type: "category",
      data: yData,
      axisLine: {
        lineStyle: {
          color: "#00D1FF",
        },
      },
      splitLine: {
        lineStyle: {
          color: "#0094ff",
        },
      },
      axisLabel: {
        show: true,
      },
    },
    series: [
      {
        type: "bar",
        barWidth: 20,
        data: seriesData,
        label: {
          show: true,
          position: "right",
          formatter: "{c}人",
          color: "inherit",
        },
        itemStyle: {
          color: function (params) {
            return colorList[params.dataIndex % colorList.length];
          },
        },
      },
    ],
  };
  barChartA.value = echarts.init(barChartRefA.value);
  barChartA.value.setOption(option);
};
// const pieData = [
//   {
//     name: "女生入住",
//     value: 20,
//   },
//   {
//     name: "男生入住",
//     value: 10,
//   },
//   {
//     name: "空",
//     value: 10,
//   },
// ];
const pieData = ref([]);

const icon =
  "";
let pieChartRef = ref(null);
let pieChart = ref(null);
const initChartB = () => {
  if (pieChartRef.value) {
    const existingChart = echarts.getInstanceByDom(pieChartRef.value);
    if (existingChart) existingChart.dispose();
  }
  pieChart.value = echarts.init(pieChartRef.value);
  pieChart.value.setOption({
    color: ["#00fff0", "#00ffb2", "#FFF"],
    graphic: {
      elements: [
        {
          type: "image",
          style: {
            image: icon,
            width: 38,
            height: 34,
          },
          left: "36%",
          top: "center",
        },
      ],
    },
    legend: {
      show: false,
    },
    series: [
      {
        type: "pie",
        radius: ["40%", "65%"],
        center: ["40%", "50%"],
        label: {
          formatter: ["{a|{b}}", "{b|{c}床}"].join("\n"),
          rich: {
            a: {
              color: "#fff",
              fontSize: 12,
            },
            b: {
              color: "#fff",
              fontSize: 12,
            },
          },
        },
        data: pieData.value,
      },
    ],
  });
};
let barChartRef = ref(null);
let barChart = ref(null);
const colorList = ["#0abbb0", "#bac415", "#BC5C1F", "#913633"];
const initChartE = () => {
  const option = {
    color: colorList,
    legend: {
      data: ["正常归寝", "未归"],
      top: 10,
      textStyle: {
        fontSize: 12,
        color: function (params) {
          return params.color;
        },
      },
    },
    grid: {
      top: 50,
      right: 60,
      bottom: 30,
      left: 30,
    },
    tooltip: {},
    xAxis: {
      data: ["3月", "4月", "5月", "6月"],
      axisLine: {
        lineStyle: {
          color: "#0094ff", // ✅ X轴线颜色
        },
      },
      axisTick: {
        lineStyle: {
          color: "#0094ff", // ✅ X轴刻度线颜色
        },
      },
      axisLabel: {
        color: "#fff",
      },
    },
    yAxis: {
      type: "value",
      axisLine: {
        lineStyle: {
          color: "#00D1FF",
        },
      },
      splitLine: {
        lineStyle: {
          color: "#0094ff",
        },
      },
      axisLabel: {
        show: true,
      },
    },
    series: [
      {
        name: "正常归寝",
        stack: "归寝",
        type: "bar",
        barWidth: 14,
        data: [80, 80, 80, 70],
        label: {
          show: false,
        },
      },
      {
        name: "未归",
        stack: "归寝",
        type: "bar",
        barWidth: 14,
        data: [0, 5, 5, 10],
        label: {
          show: false,
        },
      },
    ],
  };
  barChart.value = echarts.init(barChartRef.value);
  barChart.value.setOption(option);
};

onUnmounted(() => { 
  if(ref_setInterval.value)
  {
    clearInterval(ref_setInterval.value);
    ref_setInterval.value = null;
  }
})

const ref_setInterval = ref(null);
const refreshDataInterval = () => { 
  if (import.meta.env.VITE_API_REFRESH_IsEnable == 0) {
    ref_setInterval.value = setInterval(() => {
        check_in_statistics();
        apartment_beds_statistics();
        initChartE();
    }, import.meta.env.VITE_API_REFRESH_INTERVAL);
  }
}

</script>

<style lang="scss" scoped>
.chart-container {
  width: 100%;
  height: 100%;
}
.left-container {
  width: 480px;
  height: calc(100% - 10px);
  color: #00ffff;
  margin-top: 10px;
  background-image: url("@/assets/images/profile/CenterBack3x.png");
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  padding: 20px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}
.person {
  font-size: 16px;
  color: #00fff0;
  margin: 10px 0;
  flex: 1;
  span {
    font-size: 26px;
    line-height: 43px;
    border-radius: 5px;
    background-color: rgba(255, 255, 255, 0);
    margin-right: 4px;
    border: 1px solid rgba(0, 255, 240, 1);
    padding: 0 8px;
  }
}
.legend {
  color: #fff;
  border: 1px solid #00ffff;
  background: rgba(0, 255, 255, 0.2);
  padding: 6px 10px;
  border-radius: 10px;
  margin: 4px 0;
  font-size: 12px;
}
.legend-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 6px;
  background: #46deff;
}
</style>
